import { MyAppType } from "@/router/type";
import { lazy } from "react";
import WithLoading from "@/layout/WithLoading";
import { CodeSandboxOutlined } from "@ant-design/icons";

const Shadow = lazy(() => import("@/views/ThreeCss/Shadow"));
const Animate = lazy(() => import("@/views/ThreeCss/Animate"));

const ThreeCss: MyAppType = {
  path: "/threeCss",
  name: "ThreeCss",
  meta: {
    icon: <CodeSandboxOutlined />,
    title: "CSS3进阶",
    order: 6,
  },
  children: [
    {
      path: "shadow",
      name: "Shadow",
      element: WithLoading(<Shadow />),
      meta: {
        title: "阴影进阶",
      },
    },
    {
      path: "animate",
      name: "Animate",
      meta: {
        title: "动画进阶",
      },
      element: WithLoading(<Animate />),
    },
  ],
};


export default ThreeCss;